<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>让项卡一次只有一个是活动的</title>
    <style>
        .tab-strip {
            background-color: #e4e2d5;
            padding: 3px;
            height: 22px;
        }

        .tab-strip div {
            float: left;
            font: 14px arial;
            cursor: pointer;
        }

        .tab-strip-tab {
            padding: 3px;
        }

        .tab-strip-tab:hover {
            border: thin solid #316ac5;
            background-color: #c1d2ee;
            padding: 2px;
        }

        .tab-strip-tab-click {
            border: thin solid #facc5a;
            background-color: #f9e391;
            padding: 2px;
        }
    </style>
</head>
<body>
<div class="tab-strip">
    <div class="tab-strip-tab" data-tab-number="1">Tab 1</div>
    <div class="tab-strip-tab" data-tab-number="2">Tab 2</div>
    <div class="tab-strip-tab" data-tab-number="3">Tab 3</div>
</div>
<div id="description-container"></div>
<script>
    var evt = {
        addListener: function (obj, type, fn) {
            if (obj.addEventListener) {
                obj.addEventListener(type, fn);
            } else {
                obj.attachEvent('on' + type, fn);
            }
        },

        removeListener: function (obj, type, fn) {
            if (obj.removeEventListener) {
                obj.removeEventListener(type, fn);
            } else {
                obj.detachEvent('on' + type, fn);
            }
        },

        getTarget: function (e) {
            if (e.target) {
                return e.target;
            }
            return e.srcElement;
        },

        preventDefault: function (e) {
            if (e.preventDefault) {
                e.preventDefault();
            } else {
                e.returnValue = false;
            }
        }
    };
    var activeTab = null;

    function handleEvent(e) {
        var target = evt.getTarget(e);
        var type = e.type;
        if (type == 'click' && target.className == 'tab-strip-tab') {
            if (activeTab) {
                activeTab.className = 'tab-strip-tab'
            }
            target.className = 'tab-strip-tab-click';
            var num = target.getAttribute('data-tab-number');
            showDescription(num);
            activeTab = target;
        }
    }

    function showDescription(num) {
        var text = 'Descriptipn for Tab ' + num;
        var descriptionContainer = document.getElementById('description-container');
        descriptionContainer.innerHTML = text;
    }

    evt.addListener(document, 'click', handleEvent);
</script>
</body>
</html>